<template>
    <div
      class="box"
      :style="{
        height:
          this.$store.state.system.isFullScreen === false
            ? 'calc(100vh - 60px)'
            : '100vh',
      }"
    >
    <div class="top">
      <div>{{Name}}</div>
    </div>
      <div class="content">
        <!-- 左侧 -->
        <div class="content_left" >
          <div>
            <div><span @click="screen">综合统计</span></div>
            <div><HomePage_FenZhan /></div>
          </div>
  
          <div>
            <div><span>传感器状态</span></div>
            <div><HomePage_ChanGanQiZhuangTai /></div>
          </div>
          <div>
            <div><span>综合预警状态</span></div>
            <div><HomePage_ZongHeYuJing /></div>
          </div>
        </div>
        <!-- 左侧 -->
  
        <!-- 中间 -->
        <div class="content_middle">
          <Scalelmg />
        </div>
        <!-- 中间 -->
  
        <!-- 右侧 -->
        <div class="content_right">
          <div>
            <div><span>统计曲线</span></div>
            <div class="content_right_one">
              <div>顶板离层</div>
              <div><HomePage_QuXianOne /></div>
            </div>
            <div class="content_right_two">
              <div>锚杆应力</div>
              <div><HomePage_QuXianTwo /></div>
            </div>
            <div class="content_right_three">
              <div>锚索应力</div>
              <div><HomePage_QuXianThree /></div>
            </div>
            <!-- <div class="content_right_four">
              <div>顶底板位移</div>
              <div><HomePage_QuXianFour /></div>
            </div> -->
          </div>
        </div>
        <!-- 右侧 -->
      </div>
    </div>
  </template>
  
  <script>
  import {WbeTitleList} from '../../https/api/user'
  import screenfull from "screenfull";
  import HomePage_ShiTu from '../HanJiaWanCompoents/HomePage_ShiTu.vue';
  import HomePage_ChanGanQiZhuangTai from '../HanJiaWanCompoents/HomePage_ChanGanQiZhuangTai.vue';
  import HomePage_ZongHeYuJing from '../HanJiaWanCompoents/HomePage_ZongHeYuJing.vue';
  import HomePage_QuXianOne from '../HanJiaWanCompoents/HomePage_QuXianOne.vue';
  import HomePage_QuXianTwo from '../HanJiaWanCompoents/HomePage_QuXianTwo.vue';
  import HomePage_QuXianThree from '../HanJiaWanCompoents/HomePage_QuXianThree.vue';
  import HomePage_QuXianFour from '../HanJiaWanCompoents/HomePage_QuXianFour.vue';
  import HomePage_FenZhan from '../HanJiaWanCompoents/HomePage_FenZhan.vue'
  import Scalelmg from '../HanJiaWanCompoents/Scalelmg.vue';
  export default {
    components: {HomePage_FenZhan, HomePage_ShiTu,HomePage_ChanGanQiZhuangTai,HomePage_ZongHeYuJing,HomePage_QuXianOne,HomePage_QuXianTwo,HomePage_QuXianThree,HomePage_QuXianFour,Scalelmg},
   
    data() 
     {
      return {
        Name:'',
        isFullscreen: false,
        isQuanPing: false,
      };
    },
    mounted() {
      this.Onlist();
    },
  
    methods: {
      screen() {
        // 如果不允许进入全屏，发出不允许提示
        if (screenfull.isEnabled) screenfull.toggle();
        this.$store.commit("SET_ISFULLSCREEN");
        // console.log(screenfull, this.$store.state.system.isFullScreen);
      },
      Onlist() {
        WbeTitleList().then((res) => {
          console.log('标题',res);
        if (res) {
        
  
            this.Name = res[0].SystemNames
     
        }else{
          this.Name = ''
        }
        });
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .box {
    width: 100%;
    height: 100%;
    background-image: url("../../assets/ditu.png");
    background-size: 100% 100%;
    padding: 1px;
  }
  .content {
    width: 100%;
    height: 93%;
    display: flex;
    justify-content: space-between;
    // border: 1px solid red ;
  }
  .content_left {
    width: 20%;
    height: 98%;
    margin-top: 10px;
    margin-left: 10px;
    cursor: pointer;
  
    background-color: rgba(9, 16, 32,.5);
    > div:nth-child(1) {
      width: 100%;
      height: 20%;
      // border: 1px dashed salmon;
  
      > div:nth-child(1) {
        width: 100%;
        height: 25%;
        background-image: url("../../assets/下载.png");
        background-size: 100% 100%;
        position: relative;
        > span {
          color: white;
          position: absolute;
          top: 50%;
          height: 50%;
          transform: translate(30%, -50%);
          font-style: italic;
        }
      }
      > div:nth-child(2) {
        width: 100%;
        height: 80%;
     
      }
    }
    > div:nth-child(2) {
      width: 100%;
      height: 57%;
      // border: 1px dashed salmon;
  
      > div:nth-child(1) {
        width: 100%;
        height: 10%;
        background-image: url("../../assets/下载.png");
        background-size: 100% 100%;
        position: relative;
        > span {
          color: white;
          position: absolute;
          top: 50%;
          height: 50%;
          transform: translate(30%, -50%);
          font-style: italic;
        }
      }
      > div:nth-child(2) {
        width: 100%;
        height: 90%;
     
      }
    }
    > div:nth-child(3) {
      width: 100%;
      height: 24%;
      // border: 1px dashed salmon;
  
      > div:nth-child(1) {
        width: 100%;
        height: 20%;
        background-image: url("../../assets/下载.png");
        background-size: 100% 100%;
        position: relative;
        > span {
          color: white;
          position: absolute;
          font-style: italic;
          top: 50%;
          height: 50%;
          transform: translate(30%, -50%);
        }
      }
      > div:nth-child(2) {
        width: 100%;
        height: 80%;
        
      }
    }
  }
  .content_middle {
    width: 58%;
    height: 98%;
    // border: 1px solid olive;
    margin-top: 10px;
    // background-color: seagreen;
  }
  .content_right {
    width: 20%;
    height: 98%;
    // border: 1px solid sandybrown;
    background-color: rgba(9, 16, 32,.5);
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
  
    > div {
      width: 100%;
      height: 100%;
      // border: 1px dashed salmon;
  
      > div:nth-child(1) {
        width: 100%;
        height: 5%;
        background-image: url("../../assets/下载.png");
        background-size: 100% 100%;
        position: relative;
        > span {
          color: white;
          position: absolute;
          top: 50%;
          height: 50%;
          transform: translate(30%, -50%);
          font-style: italic;
        }
      }
    }
    .content_right_one {
      width: 100%;
      height: 31%;
  
      > div:nth-child(1) {
        width: 100%;
        height: 10%;
        // border: 1px solid red;
        text-align: center;
        font-style: italic;
        color: white;
        font-size: 14px;
      }
      >div:nth-child(2){
        width: 100%;
        height: 90%;
       
      }
    }
    .content_right_two {
      width: 100%;
      height: 31%;;
      
      > div:nth-child(1) {
        width: 100%;
        height: 10%;
        // border: 1px solid red;
        text-align: center;
        font-style: italic;
        color: white;
        font-size: 14px;
      }
      >div:nth-child(2){
        width: 100%;
        height: 90%;
       
      }
    }
    .content_right_three {
      width: 100%;
      height: 31%;
     
      > div:nth-child(1) {
        width: 100%;
        height: 10%;
        // border: 1px solid red;
        text-align: center;
        font-style: italic;
        color: white;
        font-size: 14px;
      }
      >div:nth-child(2){
        width: 100%;
        height: 90%;
        
      }
    }
    .content_right_four {
      width: 100%;
      height: 23.75%;
     
      > div:nth-child(1) {
        width: 100%;
        height: 10%;
        // border: 1px solid red;
        text-align: center;
        font-style: italic;
        color: white;
        font-size: 14px;
      }
      >div:nth-child(2){
        width: 100%;
        height: 90%;
        
      }
    }
  }
  .top{
    width: 100%;
    height: 50px;
    // border: 1px solid red;
    background-image: url('../../assets//ShowYwTitle (1).png');
    background-size: 100% 180%;
    background-repeat: no-repeat;
    div{
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      color: white;
      font-weight: 900;
    }
  }
  </style>